<template>
    <div class="font-inter bg-gray-50 text-dark">
        <!-- 顶部导航栏：固定+毛玻璃背景+竖排导航 -->
        <header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-sm shadow-sm">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between items-center h-16">
                    <!-- 品牌区域：图标放大+文字加粗 -->
                    <div class="flex items-center">
                        <a href="#" class="flex items-center">
                            <div class="w-8 h-8 flex items-center justify-center bg-primary text-white rounded-full mr-2">
                                <i class="fa fa-heartbeat text-base"></i>
                            </div>
                            <span class="text-xl font-bold text-primary">良心有限医疗</span>
                        </a>
                        <!-- 导航菜单：竖排文字（md及以上显示） -->
                        <nav class="hidden md:ml-10 md:flex space-x-8">
                            <a href="/moxiang/homef" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors whitespace-pre">首<br>页</a>
                            <a href="/moxiang/departments" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors whitespace-pre">科室<br>导航</a>
                            <a href="/moxiang/doctors" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors whitespace-pre">医生<br>团队</a>
                            <a href="/moxiang/appointment" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors whitespace-pre">预约<br>挂号</a>
                            <a href="/moxiang/about" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium transition-colors whitespace-pre">关于<br>我们</a>
                        </nav>
                    </div>
                    <!-- 移动端菜单按钮（md以下显示） -->
                    <div class="flex items-center md:hidden">
                        <button id="mobileMenuBtn" class="text-gray-700 hover:text-primary focus:outline-none">
                            <i class="fa fa-bars text-xl"></i>
                        </button>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区域：补偿导航栏高度（pt-24） -->
        <main class="pt-24 pb-16">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <!-- 标题区域：更大间距+文字层级 -->
                <div class="text-center mb-12">
                    <h1 class="text-3xl md:text-4xl font-bold text-dark mb-4">
                        <span class="text-primary">AI 智障问诊</span> - 24小时在线解答
                    </h1>
                    <p class="text-gray-600 max-w-2xl mx-auto">
                        我们的AI医生基于最新医疗知识库，可提供初步健康咨询和建议。<br>
                        请注意，AI建议仅供参考，不能替代专业医生诊断。
                    </p>
                </div>

                <!-- AI聊天区域：更大容器+立体样式 -->
                <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
                    <!-- 聊天头部：高内边距+图标优化 -->
                    <div class="bg-primary text-white px-6 py-4 flex items-center">
                        <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-3">
                            <i class="fa fa-robot text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-medium">AI 医疗助手</h3>
                            <p class="text-xs opacity-80">在线 · 基于豆包AI大模型</p>
                        </div>
                        <div class="ml-auto">
                            <button @click="resetChat" class="p-2 rounded-full hover:bg-white/10 transition-colors">
                                <i class="fa fa-refresh text-white text-sm"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 聊天内容区：高滚动区+阴影气泡 -->
                    <div id="chatContainer" class="h-96 overflow-y-auto p-4 bg-gray-50 scrollbar-hide space-y-4">
                        <!-- 初始欢迎消息 -->
                        <div class="flex">
                            <div class="w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center mr-3 flex-shrink-0">
                                <i class="fa fa-robot"></i>
                            </div>
                            <div class="bg-white p-3 rounded-lg shadow max-w-[80%] text-gray-800">
                                <p>您好！我是AI医疗助手，可以为您提供健康咨询和医疗建议。请问您有什么不适症状或健康问题需要咨询？</p>
                                <p class="mt-2 text-xs text-gray-500">温馨提示：AI回答仅供参考，具体诊断请以医生为准。</p>
                            </div>
                        </div>

                        <!-- 动态消息循环 -->
                        <div
                            v-for="(message, index) in chatMessages"
                            :key="index"
                            :class="{
                'flex justify-end': message.sender === 'user',
                'flex': message.sender === 'ai'
              }"
                            class="mb-4"
                        >
                            <!-- AI头像 -->
                            <div
                                v-if="message.sender === 'ai'"
                                class="w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center mr-3 flex-shrink-0"
                            >
                                <i class="fa fa-robot text-sm"></i>
                            </div>

                            <!-- 消息气泡 -->
                            <div
                                :class="{
                  'bg-primary text-white p-3 rounded-lg shadow max-w-[80%]': message.sender === 'user',
                  'bg-white text-gray-800 p-3 rounded-lg shadow max-w-[80%]': message.sender === 'ai'
                }"
                            >
                                <p v-if="!message.isTyping">{{ message.content }}</p>
                                <p v-if="message.isTyping" class="typing-indicator"></p>
                            </div>

                            <!-- 用户头像 -->
                            <div
                                v-if="message.sender === 'user'"
                                class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center ml-3 flex-shrink-0"
                            >
                                <i class="fa fa-user text-sm"></i>
                            </div>
                        </div>
                    </div>

                    <!-- 输入区域：高输入框+大按钮 -->
                    <div class="border-t border-gray-200 p-4 bg-white">
                        <form @submit.prevent="sendMessage" class="flex items-center">
                            <div class="flex-1 relative">
                                <input
                                    v-model="userInput"
                                    type="text"
                                    placeholder="描述您的症状或问题..."
                                    class="w-full pl-4 pr-12 py-3 border border-gray-300 rounded-full focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
                                    autocomplete="off"
                                >
                                <button
                                    type="button"
                                    class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary"
                                >
                                    <i class="fa fa-microphone"></i>
                                </button>
                            </div>
                            <button
                                type="submit"
                                class="ml-3 w-12 h-12 rounded-full bg-primary text-white hover:bg-primary/90 transition-colors flex items-center justify-center"
                            >
                                <i class="fa fa-paper-plane text-sm"></i>
                            </button>
                        </form>
                        <!-- 快捷问题 -->
                        <div class="mt-2 flex flex-wrap gap-2 text-xs">
                            <button
                                @click="quickQuestion('感冒了怎么办？')"
                                class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors"
                            >
                                感冒了怎么办？
                            </button>
                            <button
                                @click="quickQuestion('头痛可能是什么原因？')"
                                class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors"
                            >
                                头痛可能是什么原因？
                            </button>
                            <button
                                @click="quickQuestion('如何缓解胃痛？')"
                                class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors"
                            >
                                如何缓解胃痛？
                            </button>
                            <button
                                @click="quickQuestion('高血压饮食建议')"
                                class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-full transition-colors"
                            >
                                高血压饮食建议
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 免责声明：宽容器+图标提示 -->
                <div class="mt-6 p-4 bg-white rounded-lg shadow-sm max-w-4xl mx-auto">
                    <div class="flex items-start">
                        <div class="text-yellow-500 mr-2 mt-1">
                            <i class="fa fa-exclamation-triangle"></i>
                        </div>
                        <div>
                            <h4 class="font-medium text-sm text-gray-800">免责声明</h4>
                            <p class="text-xs text-gray-600 mt-1">
                                AI医疗助手提供的建议仅供参考，不能替代专业医生的诊断和治疗。如有紧急情况或严重症状，请立即就医。平台不对AI提供的信息准确性做任何保证。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import request from '../../api/request.js' // 确保请求工具路径正确

// 响应式数据
const userInput = ref('')
const chatMessages = ref([])

// 初始化聊天消息
onMounted(() => {
    chatMessages.value = [
        {
            sender: 'ai',
            content: '您好！我是AI医疗助手，可以为您提供健康咨询和医疗建议。请问您有什么不适症状或健康问题需要咨询？\n\n温馨提示：AI回答仅供参考，具体诊断请以医生为准。',
            isTyping: false
        }
    ]

    // 导航栏滚动阴影效果（可选增强）
    window.addEventListener('scroll', () => {
        const navbar = document.querySelector('header')
        if (window.scrollY > 10) {
            navbar.classList.add('shadow-md')
            navbar.classList.remove('shadow-sm')
        } else {
            navbar.classList.remove('shadow-md')
            navbar.classList.add('shadow-sm')
        }
    })
})

// 发送消息逻辑
const sendMessage = async () => {
    const message = userInput.value.trim()
    if (!message) return

    // 添加用户消息
    chatMessages.value.push({
        sender: 'user',
        content: message,
        isTyping: false
    })
    userInput.value = ''

    // 模拟加载状态
    chatMessages.value.push({
        sender: 'ai',
        content: '',
        isTyping: true
    })
    await nextTick()
    scrollToBottom()

    try {
        // 真实接口请求（请替换为实际后端地址）
        const response = await request.post('/input', { input: message })

        // 移除加载状态
        chatMessages.value.pop()

        // 添加AI回复
        chatMessages.value.push({
            sender: 'ai',
            content: response.data.answer || '抱歉，暂时无法为您提供解答',
            isTyping: false
        })
        scrollToBottom()
    } catch (error) {
        chatMessages.value.pop()
        chatMessages.value.push({
            sender: 'ai',
            content: '网络异常，请稍后重试',
            isTyping: false
        })
    }
}

// 快捷提问
const quickQuestion = (question) => {
    userInput.value = question
    sendMessage()
}

// 重置聊天
const resetChat = () => {
    chatMessages.value = [
        {
            sender: 'ai',
            content: '您好！我是AI医疗助手，可以为您提供健康咨询和医疗建议。请问您有什么不适症状或健康问题需要咨询？\n\n温馨提示：AI回答仅供参考，具体诊断请以医生为准。',
            isTyping: false
        }
    ]
    scrollToBottom()
}

// 滚动到底部
const scrollToBottom = () => {
    const container = document.getElementById('chatContainer')
    container && (container.scrollTop = container.scrollHeight)
}
</script>

<style scoped>
/* Tailwind 辅助工具类 */
@layer utilities {
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .typing-indicator::after {
        content: "...";
        animation: typing 1.5s infinite;
        display: inline-block;
        width: 0;
    }
    @keyframes typing {
        0% { content: "."; }
        33% { content: ".."; }
        66% { content: "..."; }
    }
}

/* 基础字体确保加载 */
body {
    font-family: 'Inter', sans-serif;
}
</style>

